/*
 * @Author: Wilbur
 * @Date: 2019-06-27 09:25:35
 * @Last Modified by: Wilbur
 * @兼职报名人员列表
 * @Last Modified time: 2019-07-01 19:30:45
 */

<template>
    <div class="container part-time-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    @submit.native.prevent
                    size="small">
                    <el-col
                        class="filter-item"
                        :span="6">
                        <el-form-item label="状态：">
                            <el-select
                                v-model="filterData.status"
                                filterable
                                clearable
                                @change="getTableData"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :span="6">
                        <el-form-item label="关键词：">
                            <el-input
                                v-model.trim="filterData.keyword"
                                placeholder="请输入搜索关键词，如姓名、手机号、学校"
                                type="text"
                                size="small"
                                style="width: 350px;"
                                @keyup.native.enter="getTableData()"
                            />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    @selection-change="handleSelectionChange"
                    style="width: 100%;">

                    <el-table-column
                        type="selection"
                        width="40" />
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="student.true_name"
                        show-overflow-tooltip
                        label="姓名"/>
                    <el-table-column
                        fixed="left"
                        prop="student.phone"
                        show-overflow-tooltip
                        label="手机号"/>
                    <el-table-column
                        prop="student.school_name"
                        show-overflow-tooltip
                        label="学校"/>
                    <el-table-column
                        prop="student.education_level"
                        label="学历">
                        <template slot-scope="scope">
                            {{ filterLevel(scope.row.student.education_level) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="student.sex"
                        label="性别">
                        <template slot-scope="scope">
                            {{ filterSex(scope.row.student.sex) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="student.major"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="报名专业"/>
                    <el-table-column
                        prop="verify"
                        min-width="80"
                        label="状态">
                        <template slot-scope="scope">
                            {{ filterStatusType(scope.row.verify) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        min-width="160"
                        label="报名时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="message"
                        show-overflow-tooltip
                        label="报名留言"/>

                    <el-table-column
                        prop="remark"
                        label="备注" />

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="180">
                        <template slot-scope="scope">
                            <div>
                                <div>
                                    <el-button
                                        type="text"
                                        @click="fnAddRemark(scope.row.student_no)">添加备注</el-button>
                                    <el-button
                                        type="text"
                                        @click="fnPass(scope.row.student_no)">通过</el-button>
                                    <el-button
                                        type="text"
                                        class="btn-delete"
                                        @click="fnReject(scope.row.student_no)">不通过</el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <a :href="exportLink">
                    <el-button
                        size="mini">导出全部
                    </el-button>
                </a>
                <el-button
                    size="mini"
                    :disabled="selected.length > 0 ? false : true"
                    @click="fnMassOperate(1)">批量通过</el-button>
                <el-button
                    size="mini"
                    :disabled="selected.length > 0 ? false : true"
                    @click="fnMassOperate(0)">批量驳回</el-button>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            pathName: '',
            authResult: {},
            statusList: [{
                id: '',
                value: '全部'
            },{
                id: 1,
                value: '待审核'
            },{
                id: 2,
                value: '审核未通过'
            },{
                id: 3,
                value: '审核通过'
            }],
            tableData: [],
            filterData: {
                status: '',
                keyword: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            parttimeNo: '',
            sessionTicket: localStorage.getItem('sessionTicket'),
            selected: []
        };
    },
    computed: {
        exportLink() {
            let { status, keyword } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            return `${base}/student/parttime_student%5Cexport_list?parttime_no=${this.$route.query.parttime_no}&status=${status}&keyword=${keyword}&__ticket=${ticket}`;
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.getParam();
        this.setHeade();
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        // if(this.$route.query.parttime_no) {
        //     this.partTimeNo = this.$route.query.parttime_no;

        // }else{
        //     this.$toast('兼职编号获取错误');
        // }
        this.filterData.status = this.$route.query.status ? this.$route.query.status : '';
        this.filterData.keyword = this.$route.query.keyword ? this.$route.query.keyword : '';
        this.getTableData();
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathName = from.name;
        });
    },
    mounted() {
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed(){
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        /**
         * 监听返回事件
         */
        goBack () {
            this.$router.replace({
                name: this.pathName,
                query: {
                    page: this.backPage
                }
            });
        },

        /**
         * 获取url参数
         */
        getParam () {
            let query = this.$route.query;

            if (query.page !== undefined) {
                this.backPage = query.page;
            }
        },

        /**
         * 设置head
         */
        setHeade () {
            this.$store.commit('SET_HEADER', [
                {
                    title: "校园代理",
                },
                {
                    title: '工作'
                },
                {
                    title: "兼职人员列表"
                }
            ]);
        },
        fnMassOperate(type) {
            // 通过
            if(type == 1) {
                this.fnSetStudentStatus(this.selected.toString(), 3, '');
            }else{
                this.fnSetStudentStatus(this.selected.toString(), 2, '批量不通过');
            }
        },
        handleSelectionChange(val) {
            let array = [];

            val.map((item, index) => {
                array.push(item.student_no);
            });
            this.selected = array;
        },
        fnAddRemark(no) {
            this.$prompt('', '添加备注', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputPlaceholder: '请输入备注内容',
                inputErrorMessage: '请输入备注内容'
            }).then(({ value }) => {
                this.$post('/student/parttime_student%5Cremark', {
                    parttime_no: this.parttimeNo || this.$route.query.parttime_no,
                    student_no: no,
                    remark: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                    }
                });
            }).catch(() => {
            });
        },
        fnGoManage(hire_no) {
            this.$post('/wei4/hire_user%5Cget_login_session_ticket', {
                hire_no: hire_no
            }, resp => {
                if (resp.code == 1) {
                    window.open(`${this.$shopBaseUrl}/resource?session_ticket=${resp.data.session_ticket}`);
                    // if(window.location.host == 'phaadmin.wxhand.com') {
                    //     window.open('http://cms.zsdx.cn/resource?session_ticket=' + resp.data.session_ticket);
                    // }else{
                    //     window.open('http://gt.wxhand.com/resource?session_ticket=' + resp.data.session_ticket);
                    // }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        filterStatusType(status) {
            let result = '';

            if(status == 1) {
                result = '待审核';
            }else if(status == 2) {
                result = '未通过';
            }else if(status == 3) {
                result = '审核通过';
            }else{
                result = '--';
            }
            return result;
        },
        filterSex(val) {
            let result = '';

            if(val == 1) {
                result = '男';
            }else if(val == 2) {
                result = '女';
            }else{
                result = '--';
            }

            return result;
        },
        filterLevel(val) {
            let result = '';

            if(val == 1) {
                result = '专科';
            }else if(val == 2) {
                result = '本科';
            }else if(val == 3) {
                result = '研究生';
            }else if(val == 4) {
                result = '博士';
            }else{
                result = '--';
            }

            return result;
        },
        filterFileType(type) {
            let result = '';

            if(type == 'audio') {
                result = '音频';
            }else if(type == 'doc') {
                result = '文档';
            }else if(type == 'file') {
                result = '文件';
            }else{
                result = '未知';
            }
            return result;
        },
        /**
         * 获取任务名称列表
         */
        getTasks() {
            this.$post('/student/task%5Csuggest', {
                query: ''
            }, resp => {
                if (resp.code == 1) {
                    this.taskTitleList = resp.data.list;
                }
            });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/parttime_student%5Cget_list', {
                page_id: page || this.page.now_page,
                keyword: this.filterData.keyword,
                status: this.filterData.status,
                parttime_no: this.parttimeNo || this.$route.query.parttime_no
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
        fnPass(no) {
            this.fnSetStudentStatus(no, 3, '');
        },
        fnSetStudentStatus(studentNos, verify, reason) {
            this.$post('/student/parttime_student%5Cverify', {
                parttime_no: this.parttimeNo || this.$route.query.parttime_no,
                student_nos: studentNos,
                verify: verify,
                verify_fail_reason: reason
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '失败'
                    });
                }
            });
        },
        /**
         * 驳回申请
         */
        fnReject(id) {
            this.$prompt('', '不通过理由', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入理由',
                inputErrorMessage: '请输入不通过理由'
            }).then(({ value }) => {
                this.fnSetStudentStatus(id, 2, value);
            }).catch(() => {
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 列表渲染辅助函数：列表项为是否
         */
        BooleanFormatter(row, column, val) {
            if (val == 1) {
                return '是';
            } else if (val == 0) {
                return '否';
            }

            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }
    .icon-bianji{
        font-size: 14px;
        color: #B9B9B9;
        cursor: pointer;
    }
    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>
<style lang="less">
.part-time-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
}
</style>
